<template>
	<view class="personCode">
		<view class="hdsIGN">
			<h3>绑定权益人</h3>
		</view>
		<uni-forms ref="form" :modelValue="formData" label-position="alignment" labelWidth="82px" :rules="rules">
			<uni-forms-item required label="姓名" name="name">
				<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
			</uni-forms-item>
			<uni-forms-item required label="证件类型" name="idType">
				<uni-data-select v-model="formData.idType" :localdata="IDType"
					:arrayConfig="configParams"></uni-data-select>
			</uni-forms-item>
			<uni-forms-item required label="证件号码" name="idNumber">
				<uni-easyinput type="text" v-model="formData.idNumber" placeholder="请输入证件号码" />
			</uni-forms-item>
			<uni-forms-item required label="手机号" name="phoneNumber">
				<uni-easyinput type="text" v-model="formData.phoneNumber" placeholder="请输入手机号" />
			</uni-forms-item>
			<!-- <uni-forms-item required label="验证码" name="code">
				<uni-easyinput type="text" v-model="formData.code" placeholder="请输入验证码"
					style="width: 75%;display: inline-block;" />
				<button  class="plainlk" plain size="mini" style="width: 24%;float: right;padding: 5rpx;" @click="getCode">
					<uni-countdown :showDay="false" :showHour="false" :showMinute="false" :second="60"></uni-countdown>
					{{getCodeText}}
				</button>
			</uni-forms-item> -->
			<uni-forms-item label="所在城市" name="city">
				<!-- <uni-section title="本地数据" type="line" padding style="height: calc(100vh - 100px);"> -->
				<!-- :map="configParamsTree" -->
				<uni-data-picker placeholder="请选择" popup-title="请选择所在地区"  :localdata="dataTree" v-model="formData.city"
					@change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened"
					@popupclosed="onpopupclosed">
				</uni-data-picker>
				<!-- </uni-section> -->
			</uni-forms-item>
			<uni-forms-item label="代理人姓名" name="agentName">
				<uni-easyinput type="text" v-model="formData.agentName" placeholder="请输入代理人姓名" />
			</uni-forms-item>
			<uni-forms-item label="代理人工号" name="agentId">
				<uni-easyinput type="text" v-model="formData.agentId" placeholder="请输入代理人工号" />
			</uni-forms-item>
		</uni-forms>
		<view style="position: absolute;bottom: 0rpx;left: 0rpx;width: 100%;background: #fff;">
			<button style="margin: 20rpx;" class="plainlk1" @click="sendBtnautograph">下一步</button>
		</view>
	</view>
</template>

<script>
	import {
		document_type,
		Beneficiaries,
		EditActivationCodes,
		provincelist,
		citylist
	} from "@/api/system/user"
	export default {
		data() {
			return {
				getCodeText: "获取验证码",
				// configParamsTree: {
				// 	text: "name",
				// 	value: "id",
				// },
				configParams: {
					labelKey: "dictLabel",
					valueKey: "dictCode",
				},
				dataTree: [{
						text: "一年级",
						value: "1-0",
						children: [{
								text: "1.1班",
								value: "1-1"
							},
							{
								text: "1.2班",
								value: "1-2"
							}
						]
					},
					{
						text: "二年级",
						value: "2-0",
						children: [{
								text: "2.1班",
								value: "2-1"
							},
							{
								text: "2.2班",
								value: "2-2"
							}
						]
					},
					{
						text: "三年级",
						value: "3-0",
						disable: true
					},
				],
				IDType: [{
						value: 0,
						text: "身份证"
					},
					{
						value: 1,
						text: "足球"
					},
					{
						value: 2,
						text: "游泳"
					},
				],
				formData: {
					"agentId": "",
					"agentName": "",
					"city": "",
					"createBy": "",
					"createTime": "",
					"idNumber": "",
					"idType": "",
					"name": "",
					code: "",
					// "params": {},
					"phoneNumber": "",
					"remark": "",
					activationCode:''
					// "updateBy": "",
					// "updateTime": ""
				},
				Timer: "",
				getCodeBtnColor: "",
				getCodeisWaiting: false,
				option: {},
				rules: {
					// 对name字段进行必填验证
					name: {
						rules: [{
								required: true,
								errorMessage: '请输入姓名',
							},
							// {
							// 	minLength: 3,
							// 	maxLength: 5,
							// 	errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
							// }
						]
					},
					idType: {
						rules: [{
							required: true,
							errorMessage: '请选择证件类型',
						}]
					},
					idNumber: {
						rules: [{
							required: true,
							errorMessage: '请输入证件号码',
						}]
					},
					phoneNumber: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号',
						}]
					},
					// city: {
					// 	rules: [{
					// 		required: true,
					// 		errorMessage: '请选择所在城市',
					// 	}]
					// }
				}
			}
		},
		onLoad: function(option) {
			this.option = option
			console.log(option, 'option')
			this.getData()
			this.getprovincelist()
		},
		methods: {
			getData() {
				document_type().then(res => {
					console.log(res, 'res')
					this.IDType = res.data
				})
			},
			//更新状态
			updata(){
				//获取当前年月日
				var now = new Date();
				var year = now.getFullYear(); //得到年份
				var month = now.getMonth()+1;//得到月份
				var date = now.getDate();//得到日期
				var data = year + "-" + month + "-" + date + "-" ;
				let form = uni.getStorageSync('ActivationCodeslist')
				form.status = "Y"
				form.activationTime = data
				form.activatedBy = this.formData.phoneNumber
				EditActivationCodes(form).then(res=>{
					if(res.code == 200){
						uni.navigateTo({
							url: `/pages/code/autograph`
						});
						console.log(res, 'res')
					}
				})
			},
			sendBtnautograph() {
				this.formData.activationCode = this.option?.activationCode
				this.$refs.form.validate().then(res=>{
					console.log('表单数据信息：', res);
					Beneficiaries(this.formData).then(res => {
						if(res.code == 200){
							this.updata()
						}
					})
				}).catch(err =>{
					console.log('表单错误信息：', err);
				})
			},
			// 点击获取验证码
			getCode() {
				uni.hideKeyboard() //隐藏已经显示的软键盘，如果软键盘没有显示则不做任何操作。
				if (this.getCodeisWaiting) {
					return;
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.formData.phoneNumber))) { //校验手机号码是否有误
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return false;
				}
				this.getCodeText = "发送中..." //发送验证码
				this.getCodeisWaiting = true;
				this.getCodeBtnColor = "#000000" //追加样式，修改颜色
				//示例用定时器模拟请求效果（跟后端联调时这里可写接口)
				//setTimeout(()用于在指定的毫秒数后调用函数或计算表达式
				setTimeout(() => {
					uni.showToast({
						title: '验证码已发送',
						icon: "none"
					}); // 出提示框
					//示例默认1234，生产中请删除这一句。
					// this.code = '1234'; //纯前端发送验证码，进行填入
					this.setTimer(); //调用定时器方法
				}, 1000)
			},
			setTimer() {
				let holdTime = 60; //定义变量并赋值
				this.getCodeText = "60"
				//setInterval（）是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。
				//setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭。
				this.Timer = setInterval(() => {
					if (holdTime <= 0) {
						this.getCodeisWaiting = false;
						this.getCodeBtnColor = "#999999";
						this.getCodeText = "获取验证码"
						clearInterval(this.Timer); //清除该函数
						return; //返回前面
					}
					this.getCodeText =  holdTime
					holdTime--;
				}, 1000)
			},
			getVerificationCode() {
				this.IsCode = true
			},
			formatData(data, level) {
				level = level + 1
				let result = []
				if (!data.length) return []
				result = data.map((item, index) => {
					let obj = {
						...item,
						text: item.name,
						value: item.id, // 仅仅用于唯一标识数据作用的,解决value值重复问题
						level: level, // 标识当前属于第几个层级
						children: item.children && item.children.length > 0 ? formatData(item.children, level) : []
					}
					return obj
				})
				return result
			},
			getprovincelist(){
				provincelist().then(res => {
					console.log(res, 'res')
					this.dataTree = this.formatData(res.rows, 0) 
					console.log(this.dataTree,'this.dataTree')
					// this.dataTree = res.rows
					// this.dataTree.forEach(ele =>{
					// 	ele.children = []
					// })
				})
			},
			onnodeclick(val) {
				console.log(val,'额我问问');
				let data = ['北京市','上海市','天津市','重庆市']
				console.log(data.indexOf(val.name))
				if(data.indexOf(val.name)<=-1 && val.level < 2){
					citylist(val.id).then(res => {
						console.log(res, 'res')
						this.dataTree.forEach(item =>{
							if(item.id == val.id){
								item.children = this.formatData(res.rows, 1)
							}
						})
					})
				} else {
					console.log(data)
				}
				
			},
			onpopupopened(e) {
				console.log('popupopened',e);
			},
			onpopupclosed(e) {
				console.log('popupclosed');
			},
			onchange(e) {
				console.log('onchange:', e);
			}
		}
	}
</script>

<style>
	.plainlk1 {
		border-color: transparent;
		background: rgb(41, 197, 136);
		color: rgb(255, 255, 255);
	}

	.plainlk {
		border-color: rgb(41, 197, 136);
		color: rgb(41, 197, 136);
	}

	.personCode .uni-easyinput__content-input .uni-input-input {
		text-align: right;
	}

	.personCode {
		width: 100%;
		height: 100vh;
		background: #fff;
		padding: 20rpx;
	}

	.personCode .hdsIGN {
		background: rgb(255, 255, 255);
		font-size: 1rem;
		padding: 0px 1.2rem;
	}

	.personCode .hdsIGN>h3::before {
		content: "";
		position: absolute;
		background: rgb(18, 205, 159);
		width: 0.2222em;
		height: calc(100% - 2.1667em);
		top: 1.1em;
		left: -0.6667em;
	}

	.personCode .hdsIGN>h3 {
		margin: 0px;
		font-size: 38rpx;
		padding: 0.8333em 0px;
		position: relative;
		color: rgba(0, 0, 0, 0.8);
	}

	.personCode h3 {
		font-size: 38rpx;
		font-weight: bold;
	}
</style>

<style>
	.uni-forms-item__label {
		width: 82px !important;
	}
</style>